<template>
	<view>
		<view :class="{'isMargin': isMargin}"  class="record-item" @click="goDetail(item)" v-for="item in taskList" :key="item['任务id']">
			<view class="item-title">
				<view class="left-border"></view>
				<view class="left">{{taskTypeObj[item['任务类型']]}}</view>
				<view v-if="item['任务优先级'] == 3" class="right high">高</view>
				<view v-if="item['任务优先级'] == 2" class="right middle">中</view>
				<view v-if="item['任务优先级'] == 1" class="right low">低</view>
			</view>
			<view class="item-content">
				<view class="content-top">
					<view>{{'#' + item['任务名称'] + '#'}}</view>
				</view>
				<view class="content-center">{{item['任务描述']}}</view>
				<view class="content-bottom">
					<view class="type">有效时间 ：{{item['有效时间'] | formatTime}}</view>
				</view>
				<view class="arrow"></view>
				<!-- <view @click.stop="goCancel(item.id)" v-if="isShowCancel && item['工单状态'] !== 'completed' && item['工单状态'] !== 'abandoned'"
				 class="cancel">废弃</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		props: {
			taskList: {
				type: Array,
				default: () => []
			},
			isMargin: {
				type: Boolean,
				default: true
			},
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				taskTypeObj: this.$type.taskTypeObj
			};
		},
		methods: {
			goDetail(item) {
				// if(this.isEdit) {
				// 	uni.navigateTo({
				// 		url: '/taskSystem/taskDetail/taskDetail?id=' + id + '&isEdit=' + true
				// 	})
				// 	return
				// }
				switch(item['任务类型']) {
					case 2:
						uni.navigateTo({
							url: '/taskSystem/patrolTaskDetail/patrolTaskDetail?id=' + item['任务id']
						})
						break
					case 3:
						uni.navigateTo({
							url: '/taskSystem/facilityCheckDetail/facilityCheckDetail?id=' + item['任务id']
						})
						break
					case 4:
						uni.navigateTo({
							url: '/taskSystem/qualityInspectDetail/qualityInspectDetail?id=' + item['任务id']
						})
						break
					default:
						uni.navigateTo({
							url: '/taskSystem/taskDetail/taskDetail?id=' + item.任务id
						})
				}
				// if(item['任务类型'] == 2) {
				// 	uni.navigateTo({
				// 		url: '/taskSystem/patrolTaskDetail/patrolTaskDetail?id=' + item['任务id']
				// 	})
				// 	return
				// }
				// uni.navigateTo({
				// 	url: '/taskSystem/taskDetail/taskDetail?id=' + item.任务id
				// })
			}
		},
		filters: {
			formatTime(val) {
				let value = dayjs(val.slice(7, 32)).format('YYYY-MM-DD HH:mm:ss') + '-' + dayjs(val.slice(41, 66)).format('YYYY-MM-DD HH:mm:ss')
				return value.slice(0, 16) + value.slice(19, 36)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.isMargin {
		margin-top: 15rpx;
	}
.record-item {
		width: 710rpx;
		// height: 250rpx;
		background-color: #fff;
		
		// box-shadow: 0px 6rpx 0rpx 1px rgba(161, 161, 161, 0.25);
		box-shadow: 0px 1rpx 11rpx 1rpx #EEEEEE;
		border-radius: 8rpx;
		// margin-top: 20rpx;
		// margin: 15rpx 0;
		margin-bottom: 15rpx;
		margin-left: 20rpx;

		.item-title {
			display: flex;
			justify-content: space-between;
			padding-right: 32rpx;
			width: 100%;
			height: 71rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			position: relative;
			
			// padding-top: 10rpx;
			.left-border {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #1064E9;
				position: absolute;
				left: 8rpx;
				top: 24rpx;
			}

			.left {
				padding-left: 40rpx;
				color: #333;
				font-weight: bold;
				// margin-right: 230rpx;
			}

			.right {
				color: #fff;
				font-size: 26rpx;
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 16rpx;
			}
			.high {
				background-color: #FF673E;
			}
			.middle {
				background-color: #FFA23E;
			}
			.low {
				background-color: #65ADE2;
			}
			.compete {
				color: #83D065;
				width: 82rpx;
				height: 36rpx;
				font-size: 22rpx;
				border: 2rpx solid #83D065;
				text-align: center;
			}
		}

		.item-content {
			color: #666;
			padding: 20rpx;
			font-size: 28rpx;
			position: relative;

			.content-top {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;

				.handle {
					width: 82rpx;
					height: 36rpx;
					background: #1152FC;
					color: #fff;
					font-size: 22rpx;
					text-align: center;

				}
			}

			.content-center {
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				width: 20em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				
			}

			.content-bottom {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.transfer {
					width: 82rpx;
					height: 36rpx;
					// background: #1152FC;
					color: #1152FC;
					font-size: 22rpx;
					border: 2rpx solid #1152FC;
					text-align: center;
				}

			}

			.cancel {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
				text-align: center;
				line-height: 35rpx;
				width: 80rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #E57544;
				border: 2rpx solid #E57544;
			}
		}
		.arrow {
			position: absolute;
			top: 70rpx;
			right: 50rpx;
			transform: rotate(45deg);
			width: 24rpx;
			height: 24rpx;
			color: #9F9F9F;
			border-top: 2rpx solid rgba(159, 159, 159, 1);
			border-right: 2rpx solid rgba(159, 159, 159, 1);
		}
	}
</style>
